<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../docs/src/assets/image2D.png">
    <script src="../../build/image2D.js"></script>
    <title>image2D - 用例测试 - 水印实例</title>
</head>

<body style='height:100vh'>

    <script>
        // 获取画笔
        var canvas = $$("<canvas>").attr({
            width: 200,
            height: 150
        });

        // 提前获取一次画笔
        // canvas.painter();

        var imageUrl = canvas.painter()

            // 配置画笔
            .config({
                "strokeStyle": "rgba(210,210,230,0.7)",
                "font-size": 20,
                "textAlign": "center",
                "textBaseline": "middle"
            })

            // 绘制文字
            .strokeText("watermark", 100, 70, -Math.PI / 7)

            // 图片导出为地址
            .toDataURL();

        // 创建容器
        $$("<div>")

            // 设置容器参数
            .css({
                width: '100vw',
                height: '100vh',
                position: "fixed",
                top: 0,
                left: 0,
                "pointer-events": "none",
                "z-index": 3,
                "background-image": "url(" + imageUrl + ")"
            })

            // 挂载水印到页面
            .appendTo('body');

    </script>

</body>

</html>
